import articleBillboardLess from "./index.module.less";
import {
  FileTextTwoTone,
  ReloadOutlined,
  RightOutlined,
} from "@ant-design/icons";
import { GteArticleListApi } from "@/http/api/article";
import { useState, useEffect } from "react";
import { ArticleListType } from "@/components/articleList/utils/type";
function ArticleBillboard() {
  const [HeatArticleList, setHeatArticleList] = useState([]);
  const [PageSize] = useState(5);
  const [PageNum, setPageNum] = useState(1);
  const [Filter] = useState("");

  const GetAuthorList = async () => {
    const params = {
      Filter: Filter,
      PageSize: PageSize,
      PageNum: PageNum,
      Type: "",
      Heat: 1,
    };
    const res: any = await GteArticleListApi(params);
    console.log("热度文章列表");
    if (res.status === 0) {
      setHeatArticleList(res.ArticleList);
    }
  };
  const updateArticleList = () => {
    setPageNum((PageNum) => {
      return PageNum + 1;
    });
    console.log(33333, PageNum);
  };
  useEffect(() => {
    GetAuthorList();
  }, [PageNum, PageSize]);
  return (
    <>
      <div className={articleBillboardLess.title_article_top}>
        <div className="top_title_article">
          <div className="left_art_title">
            <div>
              <FileTextTwoTone />
            </div>
            <div className="title_billboard">文章榜</div>
          </div>
          <div className="right_refalsh" onClick={updateArticleList}>
            <ReloadOutlined />
            <span>换一换</span>
          </div>
        </div>
        <div className="article_list">
          {HeatArticleList.map((item: ArticleListType, index: number) => {
            return (
              <div className="articlebillboard_list_items" key={index}>
                <div className="num">{index + 1}</div>
                <div className="articlebillboard_list_items_title">
                  {item.ArticleTitle}
                </div>
              </div>
            );
          })}
        </div>
        <div className="articleBillboard_look_more">
          <div className="articleBillboard_btn_more">
            <div>查看更多</div>
            <RightOutlined />
          </div>
        </div>
      </div>
    </>
  );
}

export default ArticleBillboard;
